<template>
  <div>
    <div class="herd">
      <router-link tag="div" to="/life">
        <img src="../../../assets/Life/返回icon.png" alt="" />
      </router-link>
      <span class="more-account">生活缴费</span>
      <span class="more-site">缴费记录</span>
    </div>
    <div>
      <div style='overflow: hidden'>
        <div class="newly">新增缴费</div>
        <div class="more-city">
          <img src="../../../assets/Life/地图.png" alt="" />
          <span class="city">城市</span>
        </div>
      </div>
      <div class="more-fee">
        <div class="top">
          <router-link class="more-water" tag="div" to="/water">
            <img src="../../../assets/Life/水费.png" alt="" />
            <p>水费</p>
          </router-link>
          <router-link class="more-water" tag="div" to="/electricity">
            <img src="../../../assets/Life/电费.png" alt="" />
            <p>电费</p>
          </router-link>
          <router-link class="more-water" tag="div" to="/gas">
            <img src="../../../assets/Life/燃气费.png" alt="" />
            <p>燃气费</p>
          </router-link>
        </div>
        <div class="button">
          <router-link class="more-net" tag="div" to="/net">
            <img src="../../../assets/Life/宽带.png" alt="" />
            <p>宽带</p>
          </router-link>
          <router-link class="more-net" tag="div" to="/heating">
            <img src="../../../assets/Life/暖气费.png" alt="" />
            <p>暖气费</p>
          </router-link>
          <router-link class="more-net" tag="div" to="/television">
            <img src="../../../assets/Life/有线电视.png" alt="" />
            <p>有线电视</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="more-agency">
      <span>缴费代扣</span>
      <i>|</i>
      <span>用户管理</span>
      <i>|</i>
      <span>帮组中心</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "more",
};
</script>

<style>
.herd {
  width: 100%;
  height: 1rem;
  display: flex;
  color: #fff;
  background-color: #ff5555;
  line-height: 1rem;
}
.herd img {
  margin: 0.3rem 0.2rem;
  height: 0.4rem;
}
.more-account {
  margin-left: 2rem;
}
.more-site {
  font-size: 0.25rem;
  margin-left: 2rem;
}
.newly{
  text-align: left;
  float: left;
  font-size: 0.3rem;
  color: rgba(0, 0, 0, 0.8);
  margin: 0.2rem;
  
}
.more-city{
  float: right;
  margin: 0.2rem;
}
.more-city img{
  width: 0.3rem;
}
.city{
  font-size: 0.3rem;
  color: #ff5555;
  
}
.more-fee {
  width: 100%;
  height: 4rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0.2rem;
}
.top {
  width: 100%;
  height: 50%;
}
.button {
  width: 100%;
  height: 50%;
}
.more-water {
  width: 33%;
  height: 100%;
  float: left;
}
.more-net {
  width: 33%;
  height: 100%;
  float: left;
}
.more-water img {
  width: 0.7rem;
  margin: 0.2rem 0;
}
.more-net img {
  width: 0.7rem;
  margin: 0.2rem 0;
}
.more-water p {
  font-size: 0.3rem;
  margin: 0.1rem 0;
}
.more-net p {
  font-size: 0.3rem;
  margin: 0.1rem 0;
}
.more-agency{
  margin-top: 0.2rem;
}
.more-agency i{
  margin: 0 0.2rem;
}
.more-agency span{
  font-size: 0.3rem;
}
</style>